﻿@{
    ViewBag.Title = "Ryan Butler.org : ASP.NET MVC Contact Form";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Creating a <abbr title="Active Server Pages">ASP</abbr>.NET <abbr title="Model View Controller">MVC</abbr> Contact Form</h1>
<h3>Adding mail functionality to our controller</h3>
<p>With the implementation of our view and model complete, we can close both of those files from inside
Visual Studio. Let’s finish the article by adding the mail functionality to e&#8212;mail the results of the form to
the specified recipient. Add the following code to our <span class="special">HomeController.cs</span>, specifically the [HttpPost]
method as illustrated below:</p>
<pre class="brush:csharp">
[HttpPost]
public ActionResult Contact(ContactModels c)
{
if (ModelState.IsValid)
{
try
{
MailMessage msg = new MailMessage();
SmtpClient smtp = new SmtpClient();
MailAddress from = new MailAddress(c.Email.ToString());
StringBuilder sb = new StringBuilder();
msg.To.Add("youremail@email.com");
msg.Subject = "Contact Us";
msg.IsBodyHtml = false;
smtp.Host = "mail.yourdomain.com";
smtp.Port = 25;
sb.Append("First name: " + c.FirstName);
sb.Append(Environment.NewLine);
sb.Append("Last name: " + c.LastName);
sb.Append(Environment.NewLine);
sb.Append("Email: " + c.Email);
sb.Append(Environment.NewLine);
sb.Append("Comments: " + c.Comment);
smtp.Send(msg);
msg.Dispose();
return View("Success");
}
catch (Exception)
{
return View("Error");
}
}
return View();
}
</pre>
<p>As you can see from the example above, quite a bit is going on, let’s dissect it in parts:</p>
<ul>
<li>If our model validation passes, we create a try/catch block which will handle server&#8212;side error
handling. Inside the try block we do the following:
<ul>
<li>Create an object from the mail message class</li>
<li>Create an object from the mail address class</li>
<li>Create an object from the string builder class</li>
<li>Create an object from the smtp client message class
<ul>
<li>From the mail object, we assign:
<ul>
<li>Whether our e&#8212;mail will contain <abbr title="Hypertext Markup Language">HTML</abbr></li>
<li>An e&#8212;mail address of the recipient</li>
<li>A subject</li>
<li>Concatenate (append) our form field values from our model to the string builder object, with appropriate carriage returns
<ul>
<li>After concatenation is complete, we assign the body of our mail message to the contents of our string builder object</li>
</ul>
</li>
</ul>
</li>
<li>From the smtp object, we assign:
<ul>
<li>Our host</li>
<li>Port number</li>
<li>Call the send method, and pass in our mail object</li>
</ul>
</li>
<li>We dispose of the mail object and show a success view</li>
</ul>
</li>
</ul>
</li>
<li>If sending our e&#8212;mail fails, we display a user friendly razor web page</li>
<li>If validation errors occur, we re&#8212;display our initial razor web page with appropriate error
messages.</li>
</ul>
<h3>Adding our success view</h3>
<p>Since our error view is already created <span class="special">(Views:Shared)</span> we’ll just create our success view by following
these steps:</p>
<ul>
<li>Right click in our controller inside the try block, and choose <span class="special">Add View</span></li>
</ul>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/19.png")" data-lightbox="image-19"><img src="@Url.Content("~/content/aspmvcform/thumbs/19.png")" alt="Add View" width="250" height="214" /></a></p>
<ul>
<li>From the <span class="special">Add View</span> window:
<ul>
<li>In <span class="special">View Name</span> text field, type <span class="special">Success</span></li>
<li>In <span class="special">Use a layout or master page</span>, leave checked, and left click the ellipses button, and
choose <span class="special">_Layout.cshtml</span></li>
</ul>
</li>
</ul>
<p>Once finished, your window should look as illustrated:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/20.png")" data-lightbox="image-20"><img src="@Url.Content("~/content/aspmvcform/thumbs/20.png")" alt="Success View" width="250" height="248" /></a></p>
<p>Left click <span class="special">Add</span>.</p>
<p>In the view, add the following as shown below:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/razor7.png")" data-lightbox="image-razor7"><img src="@Url.Content("~/content/aspmvcform/thumbs/razor7.png")" alt="Razor Syntax 7" width="300" height="51" /></a></p>
<p>Save your solution and give it a run.</p>
<h3>Some loose ends</h3>
<p>There are a few miscellaneous items that need to be verified when using this solution in a production
environment:</p>
<ol>
<li>Verify your hosting provider’s simple mail transfer protocol (SMTP) host address.</li>
<li>Verify your hosting provider’s <abbr title="Simple Mail Transfer Protocol">SMTP</abbr> port number</li>
<li>Verify your hosting provider’s current <abbr title="Model View Controller">MVC</abbr> and .NET version</li>
<li>Upload the following files to your public web directories:
<ol type="a">
<li>Bin\Mvc4ContactForm.dll</li>
<li>Views\Home\Contact.cshtml</li>
<li>Views\Home\Success.cshtml</li>
<li>Views\Home\_Layout.cshtml</li>
<li>Views\Home\Error.cshtml</li>
<li>Scripts
<ol type="i">
<li>Upload all files</li>
</ol>
</li>
<li>Content\Site.css</li>
</ol>
</li>
</ol>
<h3>Slower than molasses in January</h3>
<p>You may have noticed that when you submit the form to process and send the email message to the desired recipient, it takes considerable time for the success view to appear. In other words, after clicking the submit button, our application appears to hang, before showing the success view. There’s a reason for this and will be discussed in @Html.ActionLink("long running form submits","Index","FormSubmit").</p>
<h3>Summary</h3>
<p>In this article, we learned how to create an <abbr title="Active Server Pages">ASP</abbr> <abbr title="Model View Controller">MVC</abbr> contact form. Continuing, you learned about the
following:</p>
<ul>
<li>What prerequisites were needed to create a <abbr title="Active Server Pages">ASP</abbr> <abbr title="Model View Controller">MVC</abbr> solution</li>
<li>The differences between Views, Models, and Controllers</li>
<li>How validation works within an model – view – controller paradigm</li>
<li>Differences between unobtrusive and obtrusive JavaScript</li>
<li>How to send mail using the provided .NET native mail class</li>
</ul>
<p>If you have questions, @Html.ActionLink("contact me","Contact", "Home")</p>
<p><a href="#top">top of page</a></p>